<div class="row col-md-12">
    <div class="col-md-7" id="signalImage-container{$field.opt}">
        <div class="col-md-12 config-img-u text-center "  id="advancedDropzone-image{$field.opt}" >
            <div class="droppable-area config-img-d">
                <a class="fa fa-plus" style="font-size: small;color: #76d22d;"></a>
            </div>
        </div>
        <div class=" col-md-12 text-left config-img-des"><span>点击上传图片</span>(图片大小为20M以内，支持jpg、png)</div>
        <div class="col-md-12 config-table">
            <table class="table table-bordered table-striped " id="image-dropzone-filetable{$field.opt}">
                <thead>
                <tr>
                    <th>图片名称</th>
                    <th >上传进度</th>
                    <th >图片大小</th>
                    <th >上传状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody class="config-table-body">
                <tr>
                    <td colspan="5">图片列表将会出现在这里</td>
                </tr>
                </tbody>
            </table>

            <input type="text" class="hidden image_download_url{$field.opt}" name="{$field.name}"
                   value="{$field.value}"/>
        </div>
    </div>
    <div class="col-md-5">
        <div  class="row  config-img-pre image-pre{$field.opt}"></div>
    </div>
    <script src="/static/js/qiniu.js"></script>
    <script src="/static/js/plupload.full.min.js"></script>
    <link rel="stylesheet" href="/static/css/sweetalert.css">
    <script src="/static/js/sweetalert.min.js"></script>
    <script>
        (function () {
            var data = $(".image_download_url{$field.opt}").val();
            if (data != undefined && data !='' ) {
                $('#image-dropzone-filetable{$field.opt}').find('tr td').remove();
                var $el = $('<tr>\
													<td>' + "{$field.value}" + '</td>\
													<td><div class="progress progress-striped"><div class="progress-bar progress-bar-image{$field.opt}  progress-bar-success"></div></div></td>\
													<td>暂无</td>\
													<td>上传成功</td>\
                                                    <td class="text-center"><a class="btn btn-icon btn-red del-image{$field.opt}" style="border-radius: 50%;padding: 2px 8px;background-color: #d5080f !important;"><i class="fa-remove  "></i></a></td>\
												</tr>');
                $('#image-dropzone-filetable{$field.opt}').append($el);
                $(".progress-bar-image{$field.opt}").width('100%');

                var element = $('<img src="http://{:config('qiniu.host')['image_host'];}/{$field.value}" style="height:100%;width:100%">');
                $(".image-pre{$field.opt}").append(element);

                $('.del-image{$field.opt}').on('click', function () {
                    swal({   title: "删除",
                            text: "确定要移除改图片？",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#e61616",
                            confirmButtonText: "确定",
                            cancelButtonText:'取消',
                            closeOnConfirm: true,
                            allowOutsideClick:true
                        },
                        function(){
                            $('.del-image{$field.opt}').parent().parent().remove();
                            $(".image_download_url{$field.opt}").val('');
                            $(".image-pre{$field.opt}").find('img').remove();
                        });
                });
            }
        })();
        $.post("/file/uploader/uploadToken", function (response) {
            uploader = Qiniu.uploader({
                runtimes: 'html5,flash,html4',  // 上传模式，依次退化
                browse_button: 'advancedDropzone-image{$field.opt}',       // 上传选择的点选按钮，必需
                container: 'signalImage-container{$field.opt}',
                filters: {
                    max_file_size: '200mb',
                },
                flash_swf_url: 'js/plupload/Moxie.swf',
                dragdrop: false,
                chunk_size: '4mb',
                get_new_uptoken: true,
                uptoken: response.uptoken,
                domain: "{:config('qiniu.host')['image_host'];}",
                unique_names: false,
                save_key: false,
                auto_start: true,                  //自动上传
                multi_selection: false,
                init: {
                    'FilesAdded': function (up, file) {
                        var size = parseInt(file[0].size / 1024, 10);
                        size = size < 1024 ? (size + " KB") : (parseInt(size / 1024, 10) + " MB");
                        $('#image-dropzone-filetable{$field.opt}').find('tr td').remove();
                        $(".image-pre{$field.opt}").empty();
                        var $el = $('<tr>\
													<td>' + file[0].name + '</td>\
													<td><div class="progress progress-striped"><div class="progress-bar progress-bar-image{$field.opt}  progress-bar-warning"></div></div></td>\
													<td>' + size + '</td>\
													<td class="upload-status-image">上传中</td>\
													<td class="text-center"><a class="btn btn-icon btn-red del-image{$field.opt}" style="border-radius: 50%;padding: 2px 8px;background-color: #d5080f !important;"><i class="fa-remove  "></i></a></td>\
												</tr>');
                        $('#image-dropzone-filetable{$field.opt}').append($el);
                        //提交按钮禁止提交
                        $('.submit-btn').attr('disabled', 'disabled');
                    },
                    'BeforeUpload': function (up, file) {

                    },
                    'UploadProgress': function (up, file) {

                        total = file.size / 1024 / 1024,
                            current = file.loaded / 1024 / 1024,
                            percent = Math.floor(file.loaded / file.size * 100),
                            progressBar = $('.progress-bar-image{$field.opt}');
                        progressBar.width(percent + '%');
                    },
                    'UploadComplete': function () {
                        $('.del-image{$field.opt}').on('click', function () {
                            swal({   title: "删除",
                                    text: "确定要移除改图片？",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonColor: "#e61616",
                                    confirmButtonText: "删除",
                                    cancelButtonColor: '#2a2a2a',
                                    cancelButtonText:'取消',
                                    closeOnConfirm: true,
                                    allowOutsideClick:true
                                },
                                function(){
                                    $('.del-image{$field.opt}').parent().parent().remove();
                                    $(".image_download_url{$field.opt}").val('');
                                    $(".image-pre{$field.opt}").find('img').remove();
                                });
                        });
                    },
                    'FileUploaded': function (up, file, info) {
                        $('#image-dropzone-filetable{$field.opt}').find('tr td.upload-status-image').html('<span class="text-success">已上传</span>');
                        $('.progress-bar-image{$field.opt}').removeClass('progress-bar-warning').addClass('progress-bar-success');
                        var res = $.parseJSON(info);
                        var element = $('<img src="http://' + up.settings.domain + '/' + res.key + '" style="height:100%;width:100%;">');
                        $(".image-pre{$field.opt}").append(element);
                        $(".image_download_url{$field.opt}").val(res.key);
                        $('.submit-btn').removeAttr('disabled');

                        if($('.file-upload-image-size').length >0){
                            $('.file-upload-image-size').val(file.size / 1024 / 1024);
                        }
                    },
                    'Error': function (up, err, errTip) {
                        console.log(up);
                        console.log(err);
                        console.log(errTip);
                    },
                    'Key': function (up, file) {
                        var path = "cms/gdu_tech/";
                        var key='';
                        if(Qiniu.getFileExtension(file.name)==''){
                            key = path + new Date().getTime();
                        }else{
                            key = path + new Date().getTime() + "." + Qiniu.getFileExtension(file.name);
                        }
                        return key;
                    }
                }
            });
        });
    </script>
</div>